import React, { useCallback } from 'react';
import { Button, Form, Input, Modal, Pagination, Popconfirm, Row, Space, Table } from 'antd';
import { useAntdTable } from 'ahooks';
import { fetchUndefinedDetail, fetchFileUrl } from '@/services/userFeedback/logRetrieval';
import moment from 'moment';

export default ({ id, onCancel }: any) => {
  // const { data, loading } = useRequest(() => fetchUndefinedDetail(id), { refreshDeps: [id] });
  const [form] = Form.useForm();

  const fetchData = useCallback(
    async ({ current, pageSize }: any, formData: any) => {
      if (formData.vehicleType && Array.isArray(formData.vehicleType)) {
        const [_, vehicleType] = formData.vehicleType;
        formData.vehicleType = vehicleType;
      }

      const result = await fetchUndefinedDetail({ size: pageSize, page: current, id, ...formData });
      return result;
    },
    [id],
  );

  const { search, tableProps, pagination } = useAntdTable(fetchData, {
    form,
  });
  const { submit, reset } = search;

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      width: 60,
      render: (text: any, record: any, index: any) => {
        return index + 1 + (pagination.current - 1) * pagination.pageSize;
      },
    },
    {
      title: 'VIN',
      dataIndex: 'vin',
    },
    {
      title: 'PDSN',
      dataIndex: 'pdsn',
    },
    {
      title: '品牌',
      dataIndex: 'brandName',
    },
    {
      title: '车型',
      dataIndex: 'vehicleType',
    },
    {
      title: '版本',
      dataIndex: 'version',
    },
    {
      title: '上传时间',
      dataIndex: 'uploadTime',
      render: (text: string) => moment(text).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: '日志类型',
      dataIndex: 'logType',
      render: (text: number) => ['异常日志', '全量日志'][text - 1],
    },
    {
      title: '出现次数',
      dataIndex: 'appearNum',
    },
    {
      title: '操作',
      dataIndex: 'uploadTime',
      width: 60,
      render: (text: string, _) =>
        moment().diff(moment(text), 'days') <= 30 && (
          <Popconfirm title="是否确认下载" onConfirm={() => fetchFileUrl(_.fileUuid)}>
            <a href={text}>下载</a>
          </Popconfirm>
        ),
    },
  ];

  return (
    <Modal
      width={1200}
      bodyStyle={{ maxHeight: 568 }}
      title="详情"
      open
      onCancel={onCancel}
      footer={null}
    >
      <Form form={form} layout="inline">
        <Row wrap style={{ width: '100%', gap: 12 }}>
          <Form.Item label="VIN码" name="vin">
            <Input maxLength={17} placeholder="请输入VIN码" allowClear style={{ width: 200 }} />
          </Form.Item>
          <Space size={12}>
            <Button type="primary" onClick={submit} htmlType="submit">
              查询
            </Button>
            <Button htmlType="button" onClick={reset}>
              重置
            </Button>
          </Space>
        </Row>
      </Form>
      <Table
        style={{ marginTop: 12 }}
        size={'small'}
        rowKey="id"
        columns={columns}
        scroll={{ x: 'max-content' }}
        {...tableProps}
        pagination={false}
      />
      <Row justify="end" style={{ padding: '12px 0' }}>
        <Pagination
          // hideOnSinglePage
          showSizeChanger
          size="small"
          showQuickJumper
          {...pagination}
          showTotal={() => <span>共&nbsp;{pagination.total}&nbsp;条</span>}
          pageSizeOptions={['10', '20', '50', '100']}
        />
      </Row>
    </Modal>
  );
};
